<template>
  <div class="daohang">
    <div class="daohang-fudong">
      <!-- 这里是logo部分 -->
      <div class="logo">
        <div class="logo-title">
          <span>可</span>
          <span>楠</span>
          <img src="/static/img/tubiao/の.jpg" alt="" class="xuanzhuan">
          <span>小窝</span>
        </div>

        <div class="logo-name"  v-if="this.$store.getters.getShow">
          <span class="le-blogger" v-if="this.$store.getters.getUser.userType=='管理员'">欢迎主人回家</span>
          <span class="le-userName"  v-if="this.$store.getters.getUser.userType=='普通用户'">欢迎{{this.$store.getters.getUser.nickname}}小可爱</span>
        </div>
      </div>
      <!-- 这里是头部导航栏 -->
      <div class="nav" onresize="onresize">
        <div v-for="(dhItem,dhIndex) in daohang" :key="dhIndex" class="mainnav" @click="go(dhItem.luyou,dhIndex)">
          <i class="iconfont navIcon" :class="dhItem.icon"></i>
          <span class="navName">{{dhItem.dhName}}</span>
        </div>
      </div>
      <div class="icon-sp">
        <i class="iconfont icon-sousuo navIcon" @click="go('/search',99)"></i>

         <el-dropdown @command="handleCommand">
           <el-badge :is-dot="this.$store.state.showRed" class="item">
             <i class="iconfont icon-geren navIcon" @click="to"></i>
           </el-badge>

            <el-dropdown-menu></el-dropdown-menu>
            <el-dropdown-menu slot="dropdown" v-if="this.$store.getters.getShow">
              <el-dropdown-item command="a">退出</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
      </div>
    </div>

  </div>
</template>
<script>
export default {
  data(){
    return {
      daohang:[
        {
          "icon":"icon-shouye5",
          "dhName":"首页",
          "luyou":"/home"
        },
        {
          "icon":"icon-dangan",
          "dhName":"标签",
          "luyou":"/label"
        },
        {
          "icon":"icon-zhiyezigeqingdan",
          "dhName":"归档",
          "luyou":"/files"
        },
        {
          "icon":"icon-liuyanban1",
          "dhName":"留言板",
          "luyou":"/messageBoard"
        },
        {
          "icon":"icon-lianjie1",
          "dhName":"友人帐",
          "luyou":"/interlinkage"
        },
        // {
        //   "icon":"icon-aixin",
        //   "dhName":"书单",
        //   "luyou":"/booklist"
        // },
        {
          "icon":"icon-guanyu",
          "dhName":"关于",
          "luyou":"/about"
        },
        // {
        //   "icon":"icon-xiangmu",
        //   "dhName":"项目",
        //   "luyou":"/project"
        // },
        {
          "icon":"icon-rss",
          "dhName":"RSS",
          "luyou":"/rss"
        },
      ],
      nickname:"",
      active:0,
      user:{},
      isLogin:"",
      user_id:""
    }
  },
  created(){
    console.log("tabbarCreated");
  },
  mouted(){
    console.log("tabbarMounted");
  },
  methods:{
    go(path,index){
      this.$router.push(path);
      this.active = index;
    },
    to(){
      // console.log("登录");
      // console.log(this.$store.getters.getUser);
      var isShow = this.$store.getters.getShow;
      // console.log(isShow);
      // console.log(id);
      if(isShow){
        const id = this.$store.getters.getUser.user_id
        this.$router.push({path:"/personalTabbar",query:{id}})
      }else{
         this.$router.push("/login");
      }
    },
    // 退出登录
    async handleCommand(command){
      this.isLogin = this.$store.getters.getShow;
      if(this.isLogin){
        this.user_id = this.$store.getters.getUser.user_id;
      }
      this.loginOut(this.user_id);
      // 第二步：将这些打包添加到
      this.$store.commit("updateShow",false);
      this.$store.commit("updateVerify",true);
      //  console.log(this.$store.getters.getShow);
      localStorage.removeItem("user");
      this.$message('退出成功，欢迎回来哦！');
      this.$router.push("/home");
      location.reload();
    },
    // 退出登录：查询之前添加过信息，如果是，就修改，否则就添加
    async loginOut(user_id){
      // console.log(user_id);
      let variate = user_id;
      const {data:res} = await this.$http.post("selLoginOut",{variate});//查询当前登录的用户之前是否在login-out表添加过信息
      console.log(res);
      if(res.status != 200){
        this.$message.error('查询失败');
      }else{
        let arr = res.message;
        let loginOut_time = this.fileType.changeDate(new Date());
        console.log(loginOut_time);
        if(arr.length==0){
          console.log("没有添加过，添加信息");
          const {data:addLoginOutMes} = await this.$http.post("insertLoginOut",{user_id,loginOut_time});
          console.log(addLoginOutMes);
        }else{
          console.log("添加过了，修改信息");
          const {data:editLoginOutMes} = await this.$http.post("updateLoginOut",{user_id,loginOut_time});
          console.log(editLoginOutMes);
        }
      }
    },
    onresize(){
      alert("sss");
    },

  }

}
</script>
<style scoped>
/* 屏幕小于1440px */
@media screen and (max-width: 1440px)  {
  .add{
    width: 260px;
  }
}

/* 屏幕等于1440px */
@media screen and (max-width: 1440px) and (min-width: 1440px)  {
  .add {
    width: 348px;
  }
}

/* 屏幕大于1440px */
@media screen and (min-width:1441px) {
  .add {
    width: 348px;
  }
}
.daohang {
  /* background-color: red; */
  position: fixed;
  z-index: 3;
  width: 100%;
}

.daohang-fudong {
  /* width: 100%; */
  display: flex;
  justify-content: space-between;
  /* padding: 15px; */
  align-items: center;
  font-size: 18px;
  background-color: #fff;
  box-shadow: 0px 2px 12px #8888;
  padding-right: 10px;
}
.logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding-top: 10px;
}
.logo-title {
  width: 100px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  font-size: 20px;
  font-weight: 800;
  /* background-color: red; */
}
@keyframes xuanzhuan {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.xuanzhuan {
  width: 15px;
  height: 15px;
  border-radius: 10px;
}
.xuanzhuan:hover {
  animation: xuanzhuan 2s linear;
  cursor: pointer;
}
.logo-name {
  font-size: 13px;
  font-weight: 700;
  width: 130px;
  display: flex;
  justify-content: center;
}
.le-userName {
  background-color: #ebeef5;
  border-radius: 10px;
  padding: 2px 5px;
  background: url('/static/img/bg/3.jpg') no-repeat;
}
.nav {
  display: flex;
  align-items: center;
  padding: 10px;
}
.mainnav {
  margin: 0 15px;
  cursor: pointer;
  padding: 10px 0;
  width: 80px;
}
/* .active {
  border-bottom: 3px solid #f56c6c;
} */
.mainnav:hover {
  color: #f56c6c;
}
.navIcon {
 font-size: 20px;
  font-weight: 700;
}
.icon-sp {
  width: 90px;
  /* background-color: red; */
  display: flex;
  justify-content: space-around;
}
.navIcon:hover {
  color: #f56c6c;
}

</style>
